import React, { useState, useEffect, useCallback, useMemo } from 'react'
import style from './index.module.less';
import { httpPost, httpGet } from '@/axios';
import TableView from '@/components/table';
import { streamingDownload } from '@/utils';
import { Button, Form, Space, DatePicker, Pagination, Select } from 'antd';
const { RangePicker } = DatePicker;
import dayjs from 'dayjs';

const defaultSearchData = { pageNo: 1, pageSize: 30 }
const BusinessData = () => {
  const [form] = Form.useForm();
  const [searchObj, setSearchObj] = useState(defaultSearchData);
  const tableHeader = [
    // { title: '操作', key: 'operation_type' },
    { title: '编号', key: 'stockNo' },
    { title: '类型1', key: 'type1' },
    { title: 'POS', key: 'pos' },
    { title: '样品', key: 'yangpin' },
    { title: '堆货方式', key: 'duihuoType' },
    { title: '%', key: 'percent' },
    { title: '利润', key: 'profit' },
    { title: 'SHOP', key: 'shop' },
    { title: '销售员', key: 'salesman' },
    { title: '销售员2', key: 'salesman2' },
    { title: '出库时间', key: 'outStoreTime_Str_ss' },
  ]
  const [tableData, setTableData] = useState([])
  const [total, setTotal] = useState(0);
  const pagination = useMemo(() => {
    return {
      total,
      current: searchObj.pageNo,
      pageSize: searchObj.pageSize,
      // showQuickJumper: true,
      showSizeChanger: true,
      showTotal: (total) => `共 ${total} 条数据`
    };
  }, [searchObj, total]);
  const pageChange = (page, pageSize) => {
    setSearchObj((v) => ({...v, pageNo: page, pageSize }))
  }
  const enterBoundCall = async () => {
    const { stockNo, beginTime, endTime, yangpin } = searchObj;
    const res = await httpGet('/profit/download', { 
      stockNo, beginTime, endTime, yangpin
    }, { responseType: "blob" });
    if (res) {
      streamingDownload(res, '利润统计')
    }
  }
  const getTableData = useCallback(async () => {
    const res = await httpPost('/profit/page_list', searchObj);
    if (res) {
      setTableData(res?.data || [])
      setTotal(res?.total || 0)
    }
  }, [searchObj])
  const handleFinish = (value) => {
    if (value?.time?.length > 0) {
      setSearchObj((v) => {
        return {
          ...v,
          beginTime: dayjs(value?.time[0]).format('YYYY-MM-DD'),
          endTime: dayjs(value?.time[1]).format('YYYY-MM-DD'),
          yangpin: value?.yangpin
        }
      })
    } else {
      setSearchObj((v) => ({...v, beginTime: undefined, endTime: undefined, yangpin: value?.yangpin}))
    }
  }
  useEffect(() => {
    getTableData()
  }, [getTableData])
  return (
    <>
      <div style={{ background: "#fff", borderRadius: "20px", padding: 20 }}>
        <Form layout="inline" form={form} onFinish={handleFinish} >
          <Form.Item label="出库时间" name="time">
            <RangePicker placeholder="请选择" />
          </Form.Item>
          <Form.Item label="样品" name="yangpin">
            <Select placeholder="请选择样品" style={{ width: 140 }}>
              <Select.Option value="">ALL</Select.Option>
              <Select.Option value="T">T</Select.Option>
              <Select.Option value="F">F</Select.Option>
            </Select>
          </Form.Item>
          <Form.Item>
            <Space>
              <Button type="primary" htmlType="submit">
                搜索
              </Button>
              <Button onClick={enterBoundCall}>
                下载查询数据
              </Button>
            </Space>
          </Form.Item>
        </Form>
      </div>
      
      <div>
        <div className={style.table_big_box_1}>
          <TableView header={tableHeader} data={tableData}/>
          <div style={{ marginTop: 20, display: 'flex', justifyContent: 'flex-end' }}>
            <Pagination onChange={pageChange} {...pagination} />
          </div>        
        </div>
      </div>
    </>
  )
}

export default BusinessData;
